
class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orders: "",
            counts: [],
            start: 1,
            pagesize: 15,
            keyword: '',
            pagestart: 0,
            list: [
            ],
            days: '',
            babyname: '',
            remarks: "",
            kindname: '',
            classname: '',
            startdate: '',
            enddate: '',
            exporting:!1,
            iskeyword:!1,
        };
    }

    formatlist(list) {
        var listitem = [];
        console.log(list, 'listlistlist')
        list.forEach((x, i) => {
            // console.log(x,'x.startx.start')
            listitem.push(
                <tr key={i}>
                    {/* <td>{x.id}</td> */}
                    <td className="customerbox">
                        <div className="customer">
                            <img src={x.useraavatar} />
                            <p>{x.usernick}</p>
                        </div>
                    </td>
                    <td className="tconter">{x.phone||'无'}</td>
                    <td className="tconter">{x.kindname||'无'}</td>
                    <td className="tconter">{x.classname||'无'}</td>
                    <td className="tconter">{x.babyname||'无'}</td>
                    <td className="tconter">{x.clockdays}</td>
                    <td className="tconter">{x.sectionclockdays}</td>
                    <td className="remarks">{x.remarks || '无'}</td>
                    <td className="tconter">{x.clockDate > 0 ? formatDate(new Date(x.clockDate * 1000)) : '未打卡'}</td>
                    <td className="operatebox">
                        <div className='operate' id={"ope" + x.id}>
                            <div>
                                {/* <img src="./src/edit.png" /> */}
                                <p data-toggle="modal" data-target="#modalTwo" className='edit' onClick={this.edit1.bind(this, x.id)}>修改名称</p>
                            </div>
                            <div>
                                <img src="./src/edit.png" />
                                <p data-toggle="modal" data-target="#modalOne" className='edit' onClick={this.edit.bind(this, x.id)}>备注</p>
                            </div>
                        </div>
                    </td>
                </tr>
            )
        });
        this.setState({ listitem, list, originallist: list })
    }


    // 升级班级
    promotion(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        promotiongrade(delid, res => {
            if (res.issuccess == 1) {
                alert('升级成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            }
        })
    }
    // // 生成二维码
    // ercode(name, e) {
    //     this.setState({ showswitch: !0, ercodename: name }, () => {
    //         new QRCode($("#qrcode")[0], "./classes.html?id=" + e);
    //         // new QRCode($("#qrcode")[0], "http://www.runoob.com");
    //     })
    // }
    // // 二维码关闭
    // close() {
    //     $('#qrcode').html("")
    //     this.setState({ showswitch: !1 })
    // }
    // clickpage(e) {
    //     let { start, pagesize } = this.state
    //     start = e * pagesize
    //     this.setState({ pagestart: e, start }, () => {
    //         this.freshlist(start)
    //     })
    // }
    // getnew(start) {
    //     this.setState({ clicknew: !0 })
    //     $('#div').toggle()
    // }
    // add() {

    // }
    edit(e) {
        let { list } = this.state, that = this
        list.forEach(x => {
            if (x.id == e) {
                that.setState({ babyname: x.babyname, id: e, remarks: x.remarks, classname: x.classname, kindname: x.kindname })
            }
        })
    }
    edit1(e) {
        let { list } = this.state, that = this
        list.forEach(x => {
            if (x.id == e) {
                that.setState({ babyname: x.babyname, editid: e, classname: x.classname, kindname: x.kindname })
            }
        })
    }
    submit() {
        var { id, remarks,iskeyword } = this.state, that = this, err = ''
        if (remarks == '') err = "请输入备注"

        if (err.length > 0) {
            alert(err);
            return
        }
        Kindergartenedit({ id, remarks }, res => {
            if (res.issuccess == 1) {
                alert('备注成功!')
                that.setState({ id: 0, remarks: '' }, () => {
                    if(iskeyword){
                        that.shaixuan()
                    }else{
                        that.freshlist()
                    }
                })
            } else {
                alert(res.msg)
            }

        })

    }
    submit1() {
        var { editid, kindname, classname,iskeyword } = this.state, that = this, err = ''
        if (classname == '') err = "请输入班级名称"
        if (kindname == '') err = "请输入幼儿园名称"

        if (err.length > 0) {
            alert(err);
            return
        }
        Kindergarteneditname({ id: editid, kindname, classname }, res => {
            if (res.issuccess == 1) {
                alert('修改成功!')
                that.setState({ editid: 0, kindname: '', classname: '' }, () => {
                    if(iskeyword){
                        that.shaixuan()
                    }else{
                        that.freshlist()
                    }
                })
            } else {
                alert(res.msg)
            }

        })
    }

    componentDidMount() {
        let that = this
        laydate.render({
            elem: '#test1', //指定元素
            type: 'datetime',
            done: function (value, date, endDate) {
                that.setState({ startdate: value })
            }
        });
        laydate.render({
            elem: '#test2', //指定元素
            type: 'datetime',
            done: function (value, date, endDate) {
                that.setState({ enddate: value })
            }
        });
        this.freshlist()
    }
    freshlist() {
        let { pagesize, start,  } = this.state;
        Kindergartengetalllist({ pagesize, start }, res => {
            if (res.issuccess == 1) {
                if (start == 1) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })

    }
    shaixuan() {
        let { days, startdate, enddate,keyword } = this.state;
        if (startdate != '') {
            startdate = new Date(startdate).getTime() / 1000;
        }
        if (enddate != '') {
            enddate = new Date(enddate).getTime() / 1000;
        }
       
        Kindergartengetlist({ days, startdate, enddate,keyword }, res => {
            if (res.issuccess == 1) {
                // if (start == 1) {
                //     let pagecount = Math.ceil(res.total / pagesize);
                //     this.setpager(pagecount, start);
                //     this.setState({ start, total: res.total })
                // }
                this.formatlist(res.list);
            }
        })

    }
    exportorder() {
        let that = this, { exporting, days, startdate, enddate ,keyword   } = this.state, err = "", newstartdate = '', newenddate = '';
        if (exporting) return;
        if (days == '' && startdate == '' && enddate == ''&&keyword=='') return;
        if (startdate != '') {
            startdate = new Date(startdate).getTime() / 1000;
        }
        if (enddate != '') {
            enddate = new Date(enddate).getTime() / 1000;
        }
        this.setState({ showloading: 'ON',exporting:!0 })

        let data = {  days, startdate, enddate,keyword};
        console.log(data, 'datatata');
        Kindergartenexport(data, res => {
            this.setState({ showloading: '',exporting:!1 })
            res = JSON.parse(res)
            if(res.issuccess==1){
                console.log(API_HEAD+res.path,'API_HEAD+res.path');
               window.location.href = API_HEAD+res.path
               
            }

        })


    }
    inputschange(prop, e) {
        this.setState({
            [prop]: e.target.value
        })
    }
    cha() {
        var { days, startdate, enddate ,keyword} = this.state,that=this;
        if (days == '' && startdate == '' && enddate == ''&&keyword=='') return;
        this.setState({iskeyword:!0},()=>{
            that.shaixuan()
        })
    }
    reset() {
        this.setState({ days: '', start: 1, startdate: '', enddate: '',keyword:'',iskeyword:!1 }, () => {
            this.freshlist();
        });
    }
    cha1() {
        var { keyword } = this.state, that = this;
        if (keyword == '') return;
        that.setState({ start: 1, }, () => {
            that.freshlist()
        })
    }
    reset1() {
        this.setState({ keyword: '', start: 1, }, () => {
            this.freshlist();
        });
    }

    setpager(pagecount, start) {
        let counts = [];
        for (let i = 0; i < pagecount; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = (e * pagesize) + 1
        this.setState({ pagestart: e, start }, () => {
            this.freshlist()
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 1
        this.setState({ pagesize, start }, () => {
            this.freshlist()
        })
    }
    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }
 
    render() {
        let { days, listitem, babyname, remarks, kindname, classname, startdate, enddate, keyword,exporting } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要升级班级吗？' click={this.confirmdel.bind(this)} />
                <div className="modal " id="modalOne">
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <span className="modal-title">编辑</span>
                                <img data-dismiss="modal" src="./src/close.png" className="del" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="label input-group-addon">幼儿园名称：</span>
                                    <div className="babyname">{kindname}</div>
                                </div>
                                <div className="input-group">
                                    <span className="label input-group-addon">班级名称：</span>
                                    <div className="babyname">{classname}</div>
                                </div>
                                <div className="input-group">
                                    <span className="label input-group-addon">宝宝名字：</span>
                                    <div className="babyname">{babyname}</div>
                                </div>
                                <div className="input-group">
                                    <span className="label input-group-addon">备注</span>
                                    <textarea id='name' onChange={this.inputchange.bind(this, 'remarks')} value={remarks} type="text" placeholder='请输入备注' className="textarea" rows="3"></textarea>
                                </div>
                                <div className="modal-footer border">
                                    <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                    <button type="button" onClick={this.submit.bind(this)} id='btnimg_save' data-dismiss="modal" className="submitmod">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="modal " id="modalTwo">
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <span className="modal-title">编辑</span>
                                <img data-dismiss="modal" src="./src/close.png" className="del" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="label input-group-addon">幼儿园名称：</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'kindname')} value={kindname} type="text" placeholder='请输入幼儿园名称' className="input"></input>
                                </div>
                                <div className="input-group">
                                    <span className="label input-group-addon">班级名称：</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'classname')} value={classname} type="text" placeholder='请输入班级名称' className="input"></input>
                                </div>
                                <div className="input-group">
                                    <span className="label input-group-addon">宝宝名字：</span>
                                    <div className="babyname">{babyname}</div>
                                </div>
                                <div className="modal-footer border">
                                    <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                    <button type="button" onClick={this.submit1.bind(this)} id='btnimg_save' data-dismiss="modal" className="submitmod">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <div className='content_wrap panel-default content_wrap'>

                    <div className='breadLine '>
                        当前位置 > 班级登记管理
                        </div>


                    <div className="content">
                        <div className="tabletit">
                            <div className="search">
                                <input onChange={this.inputschange.bind(this, 'keyword')} value={keyword} type="text" placeholder='请输入幼儿园名称或宝宝名字' />
                                <input onChange={this.inputschange.bind(this, 'days')} value={days} type="text" placeholder='请输入打卡天数' />
                                <div className="inputbox">
                                    <input type="text" id="test1" placeholder='请选择开始日期' value={startdate} className="input" />
                                    <span>-</span>
                                    <input type="text" id="test2" placeholder='请选择结束日期' value={enddate} className="input" />
                                </div>

                                <p onClick={this.cha.bind(this)}>查询</p>
                                <p onClick={this.reset.bind(this)}>返回</p>
                            </div>
                        
                        </div>
                        <div className="tabletit">
                            <div className="search">
                            <p className='btn' onClick={this.exportorder.bind(this, 'order')}>{exporting ? "导出中" : "导出"}</p>
                            <p onClick={this.promotion.bind(this)}>升级年级</p>
                            </div>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>

                                    <th className="tconter">昵称头像</th>
                                    <th className="tconter">电话</th>
                                    <th className="tconter">幼儿园名称</th>
                                    <th className="tconter">班级名称</th>
                                    <th className="tconter">宝宝名字</th>
                                    <th className="tconter">累计打卡天数</th>
                                    <th className="tconter">区间打卡天数</th>
                                    <th>备注</th>
                                    <th className="tconter">最近打卡时间</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>

                    </div>
                    <div className="pagerbox">
                        <p>共{this.state.total}条</p>
                        <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                    </div>


                </div>

            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='kindergarten' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)